<template>
  <div class="bodyDiv">
    <div class="data_main">
      <div class="t_line_box">
        <i class="t_l_line"></i>
        <i class="l_t_line"></i>
      </div>

      <div class="t_line_box">
        <i class="t_r_line"></i>
        <i class="r_t_line"></i>
      </div>

      <div class="t_line_box">
        <i class="l_b_line"></i>
        <i class="b_l_line"></i>
      </div>

      <div class="t_line_box">
        <i class="r_b_line"></i>
        <i class="b_r_line"></i>
      </div>
      <div class="main_title">
        <img src="../../../assets/visualization/action1/t_1.png" alt="" />
        上半年收入汇总
      </div>

      <div style="padding:10px;margin-top:-15px;">
        <div class="main_table">
          <table>
            <thead>
              <tr>
                <th>运营数(辆)</th>
                <th>线路总长度(公里)</th>
                <th>客运总量(万人次)</th>
                <th>日期</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>21059</td>
                <td>26497</td>
                <td>184448</td>
                <td>2018年</td>
              </tr>
              <tr>
                <td>18777</td>
                <td>21140</td>
                <td>188808</td>
                <td>2017年</td>
              </tr>
              <tr>
                <td>15757</td>
                <td>20225</td>
                <td>201143</td>
                <td>2016年</td>
              </tr>
              <tr>
                <td>17458</td>
                <td>19567</td>
                <td>202446</td>
                <td>2015年</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup></script>
<style scoped>
.main_table tr {
  height: 42px;
}
.main_table {
  width: 100%;
  margin-top: 25px;
}
.main_table table {
  width: 100%;
}
.main_table thead tr {
  height: 42px;
}
.main_table th {
  font-size: 12px;
  font-weight: 600;
  color: #61d2f7;
  text-align: center;
}
.main_table th:nth-child(1) {
}
.main_table th:nth-child(2) {
}
.main_table td {
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.main_table tbody tr:nth-child(1),
.main_table tbody tr:nth-child(3),
.main_table tbody tr:nth-child(5) {
  background-color: #072951;
  box-shadow: -10px 0px 15px #2c58a6 inset,
    /*左边阴影*/ 10px 0px 15px #2c58a6 inset; /*右边阴影*/
}

.bodyDiv {
  color: #fff;
  width: 100%;
  height: 100vh;
  position: relative;
}
.t_line_box {
  position: absolute;
  width: 100%;
  height: 100%;
}
.t_line_box i {
  background-color: #4788fb;
  box-shadow: 0px 0px 10px #4788fb;
  position: absolute;
}
.t_l_line {
  height: 5px;
  width: 26px;
  left: -3px;
  top: -3px;
}
.l_t_line {
  width: 5px;
  height: 24px;
  left: -3px;
  top: -3px;
}
.t_r_line {
  height: 5px;
  width: 26px;
  right: -3px;
  top: -3px;
}
.r_t_line {
  width: 5px;
  height: 24px;
  right: -3px;
  top: -3px;
}
.l_b_line {
  width: 5px;
  height: 24px;
  left: -3px;
  bottom: -3px;
}
.b_l_line {
  height: 5px;
  width: 26px;
  left: -3px;
  bottom: -3px;
}
.r_b_line {
  width: 5px;
  height: 24px;
  right: -3px;
  bottom: -3px;
}
.b_r_line {
  height: 5px;
  width: 26px;
  right: -3px;
  bottom: -3px;
}

.data_main {
  left: 20px;
  right: 20px;
  top: 20px;
  height: 260px;
  position: absolute;
  border: 1px solid #ccc;
}
.data_main .main_title img {
  position: absolute;
  top: 8px;
  left: 20px;
}
.data_main .main_title {
  width: 180px;
  height: 35px;
  line-height: 33px;
  background-color: #2c58a6;
  border-radius: 18px;
  position: absolute;
  top: -17px;
  left: 50%;
  margin-left: -90px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-sizing: border-box;
  padding-left: 45px;
}
</style>
